<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <script src="../框架相关的js/vue.js"></script>
    <div id="app">
        {{foo}}
        <button v-on:click="foo = 'baz'" ref="btn">Change it</button>
    </div>




    <script>

        var obj = {
            foo: 'bar'
        }


        new Vue({
            el: '#app',
            data: obj,
            beforeCreate() {
                console.log(this, 'beforeCreate');
                // this.foo='哈哈哈'
                console.log(this.foo,'ffffffffffffff');
                console.log(this.$el, 'beforeCreate--this.$el');
                console.log(this.$data, 'beforeCreate--this.$data');//undefined 
                // 1、 创建前（beforeCreate）：对应钩子函数是 beforeCreate, 组件实例被创建之初，组件的属性⽣效之前。实例初始化阶段，数据观察和事件机制都还没有形成，不能获取到DOM  节点
            },
            created() {
                console.log(this, 'created');
                console.log(this.$el, 'created--this.$el');
                console.log(this.$data, 'created--this.$data');
                // this.$refs.btn.style.display='none'
                console.log(this.foo, 'created--this.foo');
                console.log(this.$refs.btn, 'created 获取某个节点');//undefined 
                // 2、 创建后 （created）： 对应钩子函数是Created,  组件实例已经完全创建，属性也绑定，但真实 dom 还没有⽣成，$el 还不可⽤。（vue 实例已创建，但是还是不能获取 DOM 节点）
            },
            beforeMount() {
                console.log(this, 'beforeMount');
                console.log(this.$el, 'beforeMount--this.$el');
                console.log(this.$data, 'beforeMount--this.$data');
                console.log(this.foo, 'beforeMount--this.foo');
                // this.$refs.btn.style.display='none'
                console.log(this.$refs.btn, 'beforeMount 获取某个节点--this.$refs.btn'); //undefined 
                // 3、 载入前 （beforeMount）： 对应钩子函数 beforeMount, 在挂载开始之前被调⽤：相关的 render 函数⾸次被调⽤。仍然不能获取 DOM 元素，
                // 此时 vue 的根元素已经创建，下面 vue 对 DOM 的操作将围绕这个根节点展开。beforeMount 是过渡性阶段，一个项目一般只能用一次
                //此时还没有渲染虚拟dom
                // 模板编译/挂载之前。在挂载开始之前被调用，相关的 render 函数首次被调用，实例已完成以下的配置： 编译模板，把 data 里面的数据和模板生成 html，此时注意还没有挂载到 Html 页面上。
                // beforeMount，挂载前状态，在我的理解挂载就是将虚拟Dom转变成真实Dom的过程，所以在这之前，我们的el当然还是拿不到的。

            },
            mounted() {
                console.log(this, 'mounted');
                console.log(this.$el, 'mounted--this.$el');
                console.log(this.$data, 'mounted--this.$data');
                // this.$refs.btn.style.display='none'
                console.log(this.$refs.btn, 'mounted 获取某个节点');   //<button>Change it</button>  可以获取到某一个dom节点
                // 4、 载入后 （mounted）： 对应钩子函数 mounted,el 被新创建的 vm.$el 替换，并挂载到实例上去之后调⽤该钩⼦。 使用得最多的钩子函数， 一般的异步请求都写在这里，此时的vue 和 DOM 都已经渲染出来了
                // 模板编译/挂载之后。在 el 被新创建的 vm.el 替换，并挂载到实例上去之后被调用，实例已完成以下的配置：用上面编译好的的 html 内容替换 l 属性指向的 Dom 对象。完成模板中的 html 渲染到 html 页面中。此过程进行 ajax 交互。
                // mounted，挂载结束，意味着虚拟Dom已经挂载在了真实的元素上，所以从此开始我们就可以拿到el了。我们可以用console.dir去打印一些我们需要的元素的属性。

            },
            beforeUpdate() {
                console.log('有数据正在更新');
                console.log(this.foo, 'beforeUpdate');
                // 5、 更新前 （beforeUpdate）： 对应钩子函数 beforeUpdate, 组件数据更新之前调⽤，发⽣在虚拟 DOM 打补丁之前。
                // VUE 遵循数据驱动 DOM 的原则， beforeUpdate 函数在数据更新后虽然没有立即更新数据，但是 DOM 的数据会改变，这是 VUE 双向数据绑定的作用
            },
            updated() {
                console.log('更新完成');
                console.log(this.foo, 'updated');
                // 6、 更新后 （updated）： 对应钩子函数 updated，组件数据更新之后。DOM 会同步更改过的内容
            },
            beforeDestroy() {
                // 7、销毁前 （beforeDestroy）： 对应钩子函数 beforeDestroy, 组件销毁前调⽤。在上一阶段 VUE 已经成功通过 数据驱动DOM 更新,当我们不再需要 VUE 操纵 DOM, 就需要销毁，也就是清除 VUE 与 DOM 的关联，调用 destroy方法 可以销毁当前组件，在销毁前，会调用 beforeDestroy 钩子函数

            },
            destroyed() {
                // 8、 销毁后 （destroyed）： 对应钩子函数 destroy， 组件销毁后调⽤。销毁后，会调用 destroyed 钩子函数

            },

        })
    </script>
</body>

</html>